<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <title>智慧验车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="<%=request.getContextPath()%>/bootstrap/css/bootstrap.css" rel='stylesheet' type='text/css' />
    <link href="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-table/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    
	<script src="<%=request.getContextPath()%>/jquery/jquery-1.10.2.min.js"></script>
	<script	src="<%=request.getContextPath()%>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-table/js/bootstrap-table.js"></script>
	<script src="<%=request.getContextPath()%>/bootstrap/plugins/bootstrap-table/js/bootstrap-table-zh-CN.js"></script>
	<script src="<%=request.getContextPath()%>/chart/js/Chart-1.0.1-beta.4.js"></script>
    <style type="text/css">
    
    	body { padding-top: 70px;
    	 padding-bottom: 70px;
    	 min-height:400px;
    	 }
    	
		
		.datetimepicker{
			top:45px!important;
		}
		.form-group{
			margin-right:20px;
		}
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
	    <a class="navbar-brand" href="#"><strong><i class="glyphicon glyphicon-th-large"></i> 智慧验车</strong></a>
    </div>

    <div class="collapse navbar-collapse">
      
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> ${username} <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#" id="rePassword">修改密码</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#" id="chart">报表</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#" id="logout">退出</a></li>
          </ul>
        </li>
      </ul>
      
      <form class="navbar-form navbar-right">
      
        <div class="form-group">
        	 
        </div>
        
      	<div id="datetimepicker" class="form-group input-append date form_datetime">
		    <input size="16" type="text" id="orderDateText" class="form-control" readonly>
		    <span class="add-on"><i class="icon-th"></i></span>
		</div>
		   <!--  <div id="datetimepicker"  class="input-append date form_datetime">
			    <input size="16" type="text" value="" readonly>
			    <span class="add-on"><i class="icon-th"></i></span>
			</div> -->
		
        <div class="form-group">
          <input type="text" id="plateNoText" class="form-control" placeholder="车牌号">
        </div>
        <button id="btn-Search" type="button" class="btn btn-default">查询</button>
      </form>
      
    </div>
  </div>
</nav>


<div class="container">
	<ul id="successStatus" class="nav nav-pills nav-stacked pull-left col-xs-2 nav-danger">
	  <li role="presentation" class="active" isSuccess=""><a href="#">全部<span class="badge pull-right"></span></a></li>
	  <li role="presentation" isSuccess="0"><a href="#">排队中<span id="success_0_num" class="badge pull-right"></span></a></li>
	  <li role="presentation" isSuccess="1"><a href="#">已完成<span class="badge pull-right"></span></a></li>
	  <li>
	  	<div id="loadNew" class="alert alert-danger" style="display: none;">
			<a href="javascript:void(0);" class="alert-link" title="点击查看">有新订单在排队中<i class="glyphicon glyphicon-refresh pull-right"></i></a>
		</div>
	  </li>
	</ul>
	
	
	<div class="pull-right col-xs-10">
		<table id="tablelist">
		    <thead>
			    <tr>
			        
			    </tr>
		    </thead>
		</table>
	</div>
</div>













	<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="myModalLabel">
					</h4>
				</div>
				<div class="modal-body">
				
					<div class="input-group col-xs-9">
					  <span class="input-group-addon" id="basic-addon1">订单状态</span>
					  <select id="orderSuccessSelect" class="form-control" aria-describedby="basic-addon1">
					  </select>
					</div>
				
				</div>
				<div class="modal-footer">
					 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            		<button type="button" class="btn btn-primary save-btn">标记</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="passwordModalLabel">
						修改密码
					</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" style="height: 160px;" >
					
						<div class="form-group col-xs-10">
						  <label class="col-xs-4 control-label">原密码</label>
						  <div class="col-xs-8">
							  <input id="oldPassword" class="form-control" type="password">
						  </div>
						</div>
						<div class="form-group col-xs-3">
						  	<span id="oldPasswordWarning" style="display:none;" class="text-danger">原密码不能为空!</span>
						</div>
						
						<div class="form-group col-xs-10">
						  <label class="col-xs-4 control-label">新密码</label>
						  <div class="col-xs-8">
						  	<input id="password" class="form-control" type="password">
						  </div>
						</div>
						<div class="form-group col-xs-3">
						  	<span id="nullPasswordWarning" style="display:none;" class="text-danger">密码不能为空!</span>
						</div>
						<div class="form-group col-xs-10">
						   <label class="col-xs-4 control-label">确认密码1</label>
						   <div class="col-xs-8">
							  <input id="passwordAgain" class="form-control" type="password">
						   </div> 
						</div>
						<div class="form-group col-xs-3">
						  	<span id="passwordWarning" style="display:none;" class="text-danger">密码不一致!</span>
						</div>
					</form>
					
				</div>
				<div class="modal-footer">
					 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            		<button type="button" class="btn btn-primary save-btn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="chartModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" 
							aria-hidden="true">×
					</button>
					<h4 class="modal-title" id="chartModalLabel">
					</h4>
				</div>
				<div class="modal-body">
						<canvas id="myChart" width="550" height="400"></canvas>				
				</div>
				<div class="modal-footer">
					 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</div>
	</div>
   

    <!--footer section start-->
   <nav class="navbar navbar-default navbar-fixed-bottom text-center">
	   	<p></p>
	   	<p>Copyright &copy; 2017 Company name All rights reserved.</p>
	</nav>


<script>
	Date.prototype.Format = function(fmt)   
	{ //author: meizz   
		var o = {   
		 "M+" : this.getMonth()+1,                 //月份   
		 "d+" : this.getDate(),                    //日   
		 "h+" : this.getHours(),                   //小时   
		 "m+" : this.getMinutes(),                 //分   
		 "s+" : this.getSeconds(),                 //秒   
		 "q+" : Math.floor((this.getMonth()+3)/3), //季度   
		 "S"  : this.getMilliseconds()             //毫秒   
		};   
		if(/(y+)/.test(fmt))   
		 fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
		for(var k in o)   
		 if(new RegExp("("+ k +")").test(fmt))   
		fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		return fmt;   
	}  
	
	
	var vehicleTypeArray = {
			1 : {text : '大型货车', cls : 'danger'},
			2 : {text : '小型货车', cls : 'warning'},
			3 : {text : '小型轿车', cls : 'primary'}
	};
	
	var isSuccessArray = {
			1 : {text : '已完成', cls : 'success'},
			0 : {text : '排队中', cls : 'danger'}
	};
	
	var failReasonArray = {
			0 : {text : '订单成功完成', success : 1},
			1 : {text : '', success : 0},
			2 : {text : '车身检验不合格', success : 0},
			3 : {text : '车辆存在违章未处理', success : 0},
			5 : {text : '其他', success : 0}
	};
	
	
	var targetId = null;
	var targetIndex = null;
	
	
	$(function(){
		
		var col = [
		 	      	{
		 	        	 field:"description",
		 	        	 title:"",
		 	        	 formatter:function(value,row,index){
		 	        		
		 	        		var html = "<div class='col-xs-3 text-" + vehicleTypeArray[row.vehicleType].cls + "'><h3>" + row.plateNo + "</h3><h5>" + row.vin + "</h5><span class='label label-" + vehicleTypeArray[row.vehicleType].cls + "'>" + vehicleTypeArray[row.vehicleType].text + "</span></div>"
		 	        					+ "<div class='col-xs-3 text-info text-center'><h5>" + row.name + "</h5><h4>" + row.mobile + "</h4><h5>" + row.orderDate + "</h5></div>"
		 	        					+ "<div class='col-xs-4 text-" + isSuccessArray[row.isSuccess].cls + " text-center'><h4><span class='label label-" + isSuccessArray[row.isSuccess].cls + "'>" + isSuccessArray[row.isSuccess].text + "</span></h4><div>" + failReasonArray[row.failReason].text + "</div></div>"
		 	        					+ "<div class='col-xs-2 text-center'><button class='btn btn-" + (row.isSuccess ? "default" : vehicleTypeArray[row.vehicleType].cls) + " btn-lg opration' targetId='" + row.id + "' targetPlateNo='" + row.plateNo + "' targetIndex='" + index + "'>标记</button>" + "</div>";
		 	        		return html;
		 	        	 }
		 	    	}  
			 	];
		
		$("#orderDateText").val(new Date().Format("yyyy-MM-dd"));
		
		$("#successStatus li[role='presentation']").click(function(){
			
			$(this).siblings().removeClass("active");
			$(this).addClass("active");
			$("#tablelist").bootstrapTable('refresh', {pageNumber : 1});
			
			$("#loadNew").hide("slow");
		});
		
		$("#loadNew .alert-link").click(function(){
			$("#plateNoText").val("");
			$("#successStatus li[isSuccess='0']").click();
			
			$(this).parent().hide("slow");
		});
		
		
		
	 	$('#tablelist').bootstrapTable({
	 		url : "getOrdersByCondition",
	 		method : "get",
	    	cardView:"true",
	    	columns:col,
	    	pagination : true,
	    	sidePagination : "server",
	    	contentType : "application/json",
	    	queryParamsType : "limit",
	    	queryParams : function(params){
	    		
	    		params.orderDate = $("#orderDateText").val();
	    		params.plateNo = $("#plateNoText").val();
	    		params.isSuccess = $("#successStatus .active").attr("isSuccess");
	    		return params;
	    	},
	    	pageSize : 5,
	    	onLoadSuccess : function(data){
	    		
	    		$("#successStatus .active span").text(data.total);
	    		
	    	}
	    	
	    });
	 	
	 	$('#datetimepicker').datetimepicker({
	        format: 'yyyy-mm-dd',
	        language:'zh-CN',
			autoclose: true,
	        minView:'month',
	        todayHighlight : true
	    });  
	  
	    

	    $("#btn-Search").click(function () {
	    	
	    	$("#tablelist").bootstrapTable('refresh',{pageNumber : 1});
	    });
	    
	    
	    $("#orderSuccessSelect").append(function(){
	    	
	    	var options = "";
	    	
	    	for(var j in isSuccessArray)
	    	{
	    		options += "<optgroup label='" + isSuccessArray[j].text + "'>";
	    		
	    		for(var i in failReasonArray)
		    	{
	    			if(failReasonArray[i].success == j)
	    			{
			    		options += "<option value='" + i + "'>" + (failReasonArray[i].text||"无") + "</option>";
	    			}
		    	}
	    		options += "</optgroup>";
	    	}
	    	
	    	return options;
	    });
	    
	    
	    $(document).on("click", ".opration", function(){
	        
	        targetId = $(this).attr("targetId");
	        targetIndex = $(this).attr("targetIndex");
	        $("#myModalLabel").text($(this).attr("targetPlateNo"));
	        $('#mymodal').modal({
	        	keyboard: true
	        });
	    });
	    
	    $("#rePassword").click(function(){
	    	$('#passwordModal').modal({
	        	keyboard: true
	        });
	    })
	    
	    $("#chart").click(function(){
	    	$.ajax({
	            type: "POST",
	            url: "getOrdersChart",
	            success: function (datas) {
	            	debugger;
	            	var data = {
	    					labels : datas[0],
	    					datasets : [
	    						{
	    							lineItemName : "近五日每日订单量",
	    							fillColor : "rgba(220,220,220,0.5)",
	    							strokeColor : "rgba(220,220,220,1)",
	    							pointColor : "rgba(220,220,220,1)",
	    							pointStrokeColor : "#fff",
	    							data : datas[1]
	    						}
	    					]
	    				};
	    	    	var ctx = document.getElementById("myChart").getContext("2d");
	    			chartLine = new Chart(ctx).Line(data);
	    			
	    			initEvent(chartLine, clickCall);
	    	    	$('#chartModal').modal({
	    	        	keyboard: true
	    	        });
	                
	            },
	            error: function () {
	                alert("查询报表失败");
	            }
	        });
	    })
	    
	    $("#logout").click(function(){
	    	  $.ajax({
		            type: "POST",
		            url: "logout",
		            success: function (data) {
		                
		                if (data == 1) 
		                {
		                	location.reload();
		                } 
		                else 
		                {
		                    alert("注销失败");
		                }
		                
		            },
		            error: function () {
		            	alert("注销失败");
		            }
		        });
	    })
	    
	    
 		$("#mymodal .save-btn").click(function () {
	    	
	    	var _this = $(this);
	    	_this.prop("disabled","disabled");
	    	
	    	var failReason = $("#orderSuccessSelect").val();
	    	
	        $.ajax({
	            type: "POST",
	            url: "saveOrdersSuccess",
	            data: {id : targetId, failReason : failReason, isSuccess : failReasonArray[failReason].success},
	            success: function (data) {
	                _this.prop("disabled", false);
	                $('#mymodal').modal('hide');
	                
	                if (data == 1) 
	                {
	                	$("#tablelist").bootstrapTable('refresh');
	                } 
	                else 
	                {
	                    alert("操作失败");
	                }
	                
	            },
	            error: function () {
	                alert("操作失败");
	                _this.prop("disabled", false);
	            }
	        });
	    });
	    
	    $("#oldPassword").blur(function(){
	    	
	    	var oldPassword = $("#oldPassword").val();
	    	if(oldPassword == ""){
	    		
	    		$("#oldPasswordWarning").show();
	    		return;
	    		
	    	}else{

	    		$("#oldPasswordWarning").hide();
	    		
	    	}
	    })
	    
 		$("#passwordModal .save-btn").click(function () {
	    	
	    	var _this = $(this);
	    	_this.prop("disabled","disabled");
	    	
	    	var oldPassword = $("#oldPassword").val();
	    	var password = $("#password").val();
	    	var passwordAgain = $("#passwordAgain").val();
	    	
	    	if(oldPassword == ""){
	    		$("#oldPasswordWarning").show();
	    		_this.prop("disabled",false);
	    		return;
	    	}else{

	    		$("#oldPasswordWarning").hide();
	    		
	    	}
	    	
	    	if(password == ""){
	    		
	    		$("#nullPasswordWarning").show();
	    		_this.prop("disabled",false);
	    		return;
	    		
	    	}else{
	    		
	    		$("#nullPasswordWarning").hide();
	    		
	    	}
	    	
	    	if(password != passwordAgain)
	    	{
	    		$("#passwordWarning").show();
	    		_this.prop("disabled",false);
	    		return;
	    	}else{
	    		$("#passwordWarning").hide();
	    	}
	    	
	    	
	        $.ajax({
	            type: "POST",
	            url: "updatePassword",
	            data: {
	            	password:password,
	            	oldPassword:oldPassword
	            },
	            success: function (data) {
	            	
	                _this.prop("disabled", false);
	                if (data == 1) 
	                {
	                	
		                $('#passwordModal').modal('hide');
		                alert("修改密码成功，请重新登陆")
	                	location.reload();
		                
	                } 
	                else if(data == 2)
	                {
	                    alert("原始密码错误，请检查");
	                    
	                }
	                else if(data == 0){
	                	
		                $('#passwordModal').modal('hide');
	                	alert("修改失败");
	                	
	                }
	                
	            },
	            error: function () {
	                alert("操作失败");
	                _this.prop("disabled", false);
	            }
	        });
	    });
 		
 		
 		
 		function checkOrderCountLoop()
 		{
 			var orderDate = $("#orderDateText").val();
 			
 			//console.log(new Date().Format("hh:mi:ss"));
 			
 			if($("#loadNew").is(":hidden"))
 			{
 				$.ajax({
 		            type: "get",
 		            url: "getOrdersCountByCondition",
 		            data: {orderDate : orderDate, isSuccess : '0'},
 		            success: function (data) {
 		                if (data.success) 
 		                {
 		                	var t = $("#success_0_num").text();
 		                	
 		                	if(data.total != t)
 		                	{
 		                		$("#loadNew").show("slow");
 		                	}
 		                }
 		                
 		                setTimeout(checkOrderCountLoop, 10 * 1000);
 		            },
 		            error: function () {
 		            	setTimeout(checkOrderCountLoop, 10 * 1000);
 		            }
 		        });
 			}
 			else
 			{
 				setTimeout(checkOrderCountLoop, 5 * 1000);
 			}
 		}
 		
 		setTimeout(checkOrderCountLoop, 5 * 1000);
 		
		var chartLine = null;
		
		
		function clickCall(evt) {
			var point = chartLine.getPointSingleAtEvent(evt);
			
			if ( point !== null )
				alert( point.label + ": " + point.lineItemName + " ____ " + point.value);
		}
		
		function initEvent(chart, handler) {
			var method = handler;
			var eventType = "click";
			var node = chart.chart.canvas;
							
			if (node.addEventListener) {
				node.addEventListener(eventType, method);
			} else if (node.attachEvent) {
				node.attachEvent("on" + eventType, method);
			} else {
				node["on" + eventType] = method;
			}
		}

	});
	
    
</script>
</body>
</html>